<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>课工场论坛列表</title>
		<link href="css/bbs.css" rel="stylesheet">
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>

		<script>
			var a = ['images/tou01.jpg', 'images/tou02.jpg', 'images/tou03.jpg', 'images/tou04.jpg'];
			$(function() {
				$(".bbs header").click(function() {
					$(".post").show();
				});
				$(".btn").click(function() {
					$(".post").hide();
					var i = parseInt(4 * Math.random());
					var $bankuaitxt = $("select").val();
					var $biaotitxt = $(".title").val();
					var $bankuai = $("<li><div><img src=" + a[i] + "></div><h1>" + $biaotitxt + "</h1><p>板块:" + $bankuaitxt + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>时间:" + new Date() + "</span></p></li>");
					$("section ul").prepend($bankuai);
					$("select").val("请选择版块");
					$(".title").val("");
					$(".content").val("");
				});
			})
		</script>
	</head>

	<body>
		<div class="bbs">
			<header><span>我要发帖</span></header>
			<section>
				<ul></ul>
			</section>
			<div class="post">
				<input class="title" placeholder="请输入标题（1-50个字符）"> 所属版块：
				<select>
					<option>请选择版块</option>
					<option>电子书籍</option>
					<option>新课来了</option>
					<option>新手报到</option>
					<option>职业规划</option>
				</select>
				<textarea class="content"></textarea>
				<input class="btn" value="发布">
			</div>
		</div>

	</body>

</html>